﻿
@{
    ViewBag.Title = "曲库信息";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    .wrap .el-scrollbar__wrap {
        overflow-x: hidden !important;
    }
</style>
<div id="app" style="width:100%;height:100%;">
    <div style="height: 94%; width: 100%;">
        <!--搜索栏-->
        <div style="padding: 10px 10px  0 10px ;">
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-row>
                    <el-form-item label="歌曲名">
                        <el-input v-model="search.name" placeholder="歌曲名"></el-input>
                    </el-form-item>
                    <el-form-item label="歌手">
                        <el-input v-model="search.singer" placeholder="歌手"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="getMusicTable">查询</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
        <div style="height:90%;width:100%;">
            <!--表格-->
            <el-scrollbar class="wrap" style="height:100%;">
                <el-table :data="tableData" border ref="tableData" v-on:select="select" v-on:row-click="clickRow" highlight-current-row @@select-all="ifCheckOne">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column label="歌曲名" show-overflow-tooltip>
                        <template v-slot="scope">
                            <span v-html="brightenKeyword(scope.row.Musics.MusicName, search.name)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="歌手" show-overflow-tooltip>
                        <template v-slot="scope">
                            <span v-html="brightenKeyword(scope.row.Singer.SingerName, search.singer)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column v-for="(item,index) in TableLabel" v-if="item.show && item.label!='图片'" :prop="item.prop" :label="item.label" :key="index" :width="item.width" :show-overflow-tooltip="item.tooltip">
                    </el-table-column>
                    <el-table-column v-else-if="item.show && item.label=='图片'" :prop="item.prop" :label="item.label" :key="index">
                        <template v-slot="scope">
                            <img src="../assets/Up.jpg" v-if="scope.row.User_Image" width="100" height="100" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button v-on:click="EditClick(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button v-on:click="DeleteClick(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-scrollbar>
        </div>
    </div>
    <!--底部分页-->
    <footer >
        <el-row style="height:100%;width:100%;">
            <el-col :span="1" style="text-align:center;line-height:40px;">
                <el-checkbox v-model="selectOne">多选</el-checkbox>
            </el-col>
            <el-col :span="1.5" style="line-height:40px;">
                <el-dropdown trigger="click" :hide-on-click="false">
                    <el-button size="small">
                        选择列<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu>
                        <el-dropdown-item>
                            <el-checkbox :indeterminate="all" v-model="checkAll" v-on:change="CheckAllChange">全选</el-checkbox>
                        </el-dropdown-item>
                        <el-dropdown-item v-for="(item,index) in TableLabel" :key="index">
                            <el-checkbox v-model="item.show" v-on:change="itemChange">{{item.label}}</el-checkbox>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
            <el-col :span="12" style="padding-top:5px;">
                <el-pagination :current-page="pagenation.currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pagenation.pageSize"
                               layout="total, sizes, prev, pager, next, jumper" background v-on:size-change="SizeChange" v-on:current-change="CurrentChange"
                               :total="pagenation.totalCount">
                </el-pagination>
            </el-col>
        </el-row>
    </footer>
    <el-dialog title="歌曲信息" :visible.sync="dialog" :close-on-click-modal="false" center width="600px" >
        <el-form :model="MusicInfo" ref="MusicInfo" label-width="160px">
            <el-form-item label="歌曲名称" :rules="[{required:true,message:'歌曲名称不能为空',trigger:'blur'}]">
                <el-input v-model="MusicInfo.Musics.MusicName" style="width:300px;"></el-input>
            </el-form-item>
            <el-form-item label="歌手名称">
                <el-input v-model="MusicInfo.Singer.SingerName" disabled style="width:300px;"></el-input>
            </el-form-item>
            <el-form-item label="专辑信息">
                <el-input v-model="MusicInfo.Albums.AlbumName" style="width:300px;"></el-input>
            </el-form-item>
            <el-form-item label="歌曲类型">
                <el-select v-model="MusicInfo.Themes.ThemeName" placeholder="--请选择--" clearable style="width:300px;">
                    <el-option v-for="item in Themes" :label="item.ThemeName" :value="item.ThemeId" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="歌曲标签">
                <el-select v-model="MusicInfo.Genres.GenreName" placeholder="--请选择--" clearable  style="width:300px;">
                    <el-option v-for="item in Genres" :label="item.GenreName" :value="item.GenreId"></el-option>
                </el-select>
            </el-form-item>        
            <el-form-item label="歌曲试听次数">
                <el-input v-model="MusicInfo.Musics.MusicClickCount" style="width:300px;"></el-input>
            </el-form-item>
            <el-form-item label="歌曲订购次数">
                <el-input v-model="MusicInfo.Musics.MusicChooseCount" style="width:300px;"></el-input>
            </el-form-item>
            <el-form-item label="歌曲品质">
                <el-input v-model="MusicInfo.Musics.MusicBitRate" style="width:300px;" disabled></el-input>
            </el-form-item>
            <el-form-item label="歌曲时长">
                <el-input v-model="MusicInfo.Musics.MusicLong" style="width:300px;"></el-input>
            </el-form-item>
            <el-form-item label="歌曲地址">
                <el-input v-model="MusicInfo.Musics.MusicUrl" style="width:300px;"></el-input>
            </el-form-item>
        </el-form>
        <el-checkbox v-model="isClose" style="padding-bottom:10px;">停留在此窗口</el-checkbox>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" v-on:click="MusicInfo('RAddInfo')">确 定</el-button>
            <el-button v-on:click="dialog = false">取 消</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],//表格的数据
                pagenation: {
                    currentPage: 1,
                    totalCount: 400,
                    pageSize: 15
                },//分页信息
                TableLabel: [
                    { prop: 'Albums.AlbumName', label: '专辑', show: true, tooltip:true},
                    { prop: 'Musics.MusicImgUrl', label: '图片', show: true },
                    { prop: 'Themes.ThemeName', label: '类别', show: true },
                    { prop: 'Genres.GenreName', label: '标签', show: true },
                    { prop: 'Musics.MusicClickCount', label: '试听次数', show: true ,width:110},
                    { prop: 'Musics.MusicChooseCount', label: '订购次数', show: true, width:110 },
                    { prop: 'Musics.MusicBitRate', label: '比特率', show: true },
                    { prop: 'Musics.MusicLong', label: '时长', show: true },
                ],//表格信息的列的信息
                all: false,//底部栏是否展示所有列
                checkAll: true,//底部栏判断全选状态
                search: {
                    name: '',
                    singer: '',
                },//过滤条件
                dialog: false,//弹出框
                MusicInfo: { 
                    Musics: {
                        MusicName:'',
                        MusicAlbum:'',
                        MusicImgUrl:'',
                        MusicClickCount:'',
                        MusicChooseCount: '',
                        MusicBitRate: '',
                        MusicLong: '',
                        MusicUrl: '',
                    },
                    Singer: {
                        SingerName: '',
                    },
                    Themes: {
                        ThemeName: '',
                    },
                    Genres: {
                        GenreName: '',
                    },
                    Albums: {
                        AblumName:'',
                    }
                },//装配工信息
                Adddialog: false, //添加信息的弹出框             
                loading: false,//加载组件
                isClose: false,//是否自动关闭
                isInfoClose: false,//是否自动关闭
                dataLodaing: false,//数据加载是加载组件
                selectOne: false,//只能选中一行
                Themes: [],
                Genres: [],
            }
        },
        methods: {
            getMusicTable() {
                let params = {
                    PageSize: this.pagenation.pageSize,
                    CurrentPage: this.pagenation.currentPage,
                    name: this.search.name,
                    singer: this.search.singer
                }
                axios.post('/Music/GetAllMusic', params).then(res => {
                    this.tableData = res.data.data
                    this.pagenation.totalCount = res.data.totalCount
                })
            },//获取所有列表
            CheckAllChange() {
                if (this.checkAll == false)//如果全选按钮选中了，按下则全部取消选中
                {
                    for (let i = 0; i < this.TableLabel.length; i++) {
                        this.TableLabel[i].show = false
                    }
                    this.all = false;
                }
                else {
                    for (let i = 0; i < this.TableLabel.length; i++) {
                        this.TableLabel[i].show = true
                    }
                    this.all = false;

                }
            },//全选所有列
            itemChange() {
                var count = 0;
                for (let i = 0; i < this.TableLabel.length; i++) {
                    if (this.TableLabel[i].show == true) {
                        count++;
                    }
                }
                if (count == this.TableLabel.length)//如果全部选中了 则全选按钮选中
                {
                    this.checkAll = true;
                    this.all = false;
                } else if (count === 0)//如果全部没选 则全选按钮不选择
                {
                    this.all = false;
                    this.checkAll = false;
                } else {//其余状况，全选按钮为其他
                    this.all = true;
                    this.checkAll = false;
                }
            },//显示的列改变
            SizeChange(val) {
                this.pagenation.pageSize = val
                this.getMusicTable();
            },//分页改变显示数量
            CurrentChange(val) {
                this.pagenation.currentPage = val
                this.getMusicTable();
            },//分页当前页改变
            EditClick(Info) {
                this.dialog = true;
                this.MusicInfo = Info;
                axios.post('/Music/GetAllGenres').then(res => {
                    this.Genres=res.data.data
                })
                axios.post('/Music/GetAllThemes').then(res => {
                    this.Themes = res.data.data
                })
            },//修改装配工信息
            onSearch() {
                this.pagenation.currentPage = 1;
                this.getMusicTable();
            },//查询
            DeleteClick(info) {
                    this.$confirm('是否全部删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post('/Music/RemoveMusic', info).then(res => {
                            if (res.data.statusCode == 1) {
                                this.$message({
                                    type: 'success',
                                    message: res.data.message
                                });
                                this.getMusicTable();
                            } else {
                                this.$message.error(res.data.message);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            },//删除
            AddAssemblerInfoBtn(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        var timer = setTimeout(() => {
                            this.$message({
                                message: "请求超时，请刷新页面重试",
                                type: 'warning'
                            });
                            this.loading = false;
                        }, 5000);//设置定时器，5S后未登录成功，则提示登陆超时

                        axios.post('/Assembler/AddAssemblerinfo', this.AddInfo).then(res => {
                            if (res.data.statusCode == 1) {
                                this.$message({
                                    message: res.data.message,
                                    type: 'success'
                                });
                                this.loading = false;
                                this.AddInfo = {};
                                this.getAssemblerTable();
                                if (this.isAddClose == false) {
                                    this.Adddialog = false;
                                }
                            } else {
                                this.$message.error(res.data.message);
                                this.loading = false;
                            }
                            clearInterval(timer);
                        })
                    } else {
                        return false;
                    }
                })
                this.getAssemblerTable();
            },//提交添加
            EditShiftInfoBtn(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        var timer = setTimeout(() => {
                            this.$message({
                                message: "请求超时，请刷新页面重试",
                                type: 'warning'
                            });
                            this.loading = false;
                        }, 5000);//设置定时器，5S后未登录成功，则提示登陆超时
                        axios.post('/Assembler/EditAssemblerinfo', this.AssemblerInfo).then(res => {
                            if (res.data.statusCode == 1) {
                                this.$message({
                                    message: res.data.message,
                                    type: 'success'
                                });
                                this.loading = false;
                                this.getAssemblerTable();
                                if (this.isInfoClose == false) {
                                    this.dialog = false;
                                }
                            } else {
                                this.$message.error(res.data.message);
                                this.loading = false;
                            }
                            clearInterval(timer);
                        })

                    } else {
                        return false;
                    }
                })
            },//提交修改        
            select(selection, row) {
                if (this.selectOne == false) {
                    if (selection.length > 1) {
                        let del_row = selection.shift();
                        this.$refs.tableData.toggleRowSelection(del_row, false);
                    }
                }
            },//选中表格一行时
            clickRow(row) {
                this.$refs.tableData.toggleRowSelection(row);
                if (this.selectOne == false) {
                    if (this.$refs.tableData.selection.length > 1) {
                        this.$refs.tableData.clearSelection()
                        this.$refs.tableData.toggleRowSelection(row);

                    }
                }
            },//点击表格一行时选中      
            ifCheckOne() {
                if (this.selectOne == false) {
                    this.$refs.tableData.clearSelection()
                }
            },//只能选中一行                 
            brightenKeyword(val, keyword) {
                const Reg = new RegExp(keyword, 'i');
                if (val) {
                    const res = val.replace(Reg, `<span style="color: red;">${keyword}</span>`);
                    return res;
                }
            },//筛选变色
        },
        created() {
           
        },//加载时获取按钮权限
        mounted() {
            this.getMusicTable();
            this.itemChange();
        },//打开时获取信息
    })
</script>

